<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/2.2.2/jquery.min.js"></script>
    <link rel="stylesheet" href="zTree_v3/css/zTreeStyle/zTreeStyle.css">
    <script src="zTree_v3/js/jquery.ztree.core.js"></script>
    <script src="zTree_v3/js/jquery.ztree.excheck.js"></script>
    <script src="zTree_v3/js/jquery.ztree.exedit.js"></script>

    <link rel="stylesheet" href="layui/css/layui.css">
    <script src="layui/layui.js"></script>


</head>
<body>

<div id="app" style="width: 400px;height: 500px;display: none">

    <div id="open">
        <ul id="treeDemo" class="ztree"></ul>
    </div>

</div>

</body>
</html>
<script>
    var zTreeObj;
    var setting = {};
    var zNodes = [
        {name:"test1", open:true, children:[
            {name:"test1_1"}, {name:"test1_2"}]},
        {name:"test2", open:true, children:[
            {name:"test2_1"}, {name:"test2_2"}]}
    ];
    $(document).ready(function(){
        zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
    });

    layui.use(['table','jquery'], function () {
        var layer = layui.layer;
        var $ = layui.jquery;

        layer.open({
            type: 1,
            content: $('#app') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
        });

    });

</script>